import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Paper from '@material-ui/core/Paper';
import Divider from '@material-ui/core/Divider';

const useStyles = makeStyles(theme => ({
  root: {
    padding: 0
  },
  link: {
    fontSize: theme.typography.subtitle2.fontSize,
    color: theme.palette.text.secondary
  }
}));

export default function () {
  const classes = useStyles()
  return <Paper elevation={4}>
    <List className={classes.root} component="nav" aria-label="main mailbox folders">
      <a className={classes.link} target='_blank' href={IconConfig['github'].url}>
        <ListItem button>
          <ListItemText primary="Github" />
          <CustIcon icon='github' />
        </ListItem>
      </a>
      <Divider />
      <a className={classes.link} target='_blank' href={IconConfig['gitee'].url}>
        <ListItem button>
          <ListItemText primary="Gitee" />
          <CustIcon icon='gitee' />
        </ListItem>
      </a>
      <Divider />
      <a className={classes.link} target='_blank' href={IconConfig['jianshu'].url}>
        <ListItem button>
          <ListItemText primary="简书" />
          <CustIcon icon='jianshu' />
        </ListItem>
      </a>
    </List>
  </Paper>
}
const prefix = '/boboan.github.io'
const IconConfig = {
  'github': {
    url: 'https://github.com/ranmeizi',
    icon: prefix + '/images/github-icon.jpg'
  },
  'gitee': {
    url: 'https://gitee.com/boboanzuiniubi',
    icon: prefix + '/images/gitee-icon.jpg'
  },
  'jianshu': {
    url: 'https://www.jianshu.com/u/fc0db81874d5',
    icon: prefix + '/images/jianshu-icon.jpg'
  }
}

const useIconStyles = makeStyles(theme => ({
  icon: {
    height: theme.spacing(3),
    width: theme.spacing(3),
    borderRadius: '8px'
  }
}));

function CustIcon({
  icon = 'github'
}) {
  const classes = useIconStyles()
  return <img className={classes.icon} src={IconConfig[icon]?.icon} />
}

